<template>
	<view class="content">
		<view class="header">
			<image src="../../static/shilu-login/logo.png"></image>
		</view>

		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/shilu-login/4.png"></image>
				<tn-input class="sl-input" v-model="loginForm.username" type="text" placeholder="输入账号" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<tn-input class="sl-input" v-model="loginForm.password" type="password" :maxLength="32"
					placeholder="输入密码" password="true" />
			</view>

		</view>
		<Verify @success="pwdLogin" :mode="'pop'" :captchaType="'blockPuzzle'"
			:imgSize="{ width: '310px', height: '255px' }" ref="verify" />
		<view class="button-login flex align-center justify-center" hover-class="button-hover" @tap="handleLogin">
			<text>登录</text>
		</view>

		<view style="padding-top: 70upx;" class="padding-left-xxl">
			<u-checkbox-group v-model="isRememberPswArr" @change="isRememberPswChange">
				<u-checkbox  :customStyle="{marginBottom: '8px'}" :key="1" label="记住密码" :name="true" />
			</u-checkbox-group>
		</view>

		<!-- 	<view class="agreenment">
			<view @click="toOtherPage('/pages/login/forget')">忘记密码</view>
			<text>|</text>
			<view @click="toOtherPage('/pages/login/reg')">注册账户</view>
		</view> -->


		<!-- 初始化密码 -->
		<!-- <tn-modal v-model="showModal" title="设置密码" width="90%"> -->
		<u-popup :show="showModal" mode="center" :round="10">
			<view class="padding-left padding-top flex justify-center">
				<h2>设置密码</h2>
			</view>
			<view class="padding">
				<view>
					<u-form labelPosition="left" :rules="rules" :model="pwdForm" labelWidth="90">
						<u-form-item label="密码" prop="oldPassword" borderBottom>
							<u-input v-model="pwdForm.oldPassword" border="surround" type="password" />
						</u-form-item>
						<u-form-item label="确认密码" prop="newPassword" borderBottom>
							<u-input v-model="pwdForm.newPassword" border="surround" type="password" />
						</u-form-item>
						<!-- 						<u-form-item label="岗位" prop="post">
							<u-input class="sl-input no-caret-input" disabled v-model="postInput" type="select"
								:maxLength="32" placeholder="所在岗位" @click="() => postShow = true" />
							<tn-select v-model="postShow" mode="single" :list="posts" @confirm="postConfirm" />
						</u-form-item> -->
					</u-form>

					<view class="padding-top flex justify-around">
						<view style="width: 45%;">
							<u-button @click="() => showModal = false" type="error" size="small" text="关闭"></u-button>
						</view>
						<view style="width: 45%;">
							<u-button @click="pwdSubmit" type="primary" size="small" text="提交"></u-button>
						</view>
					</view>


				</view>
			</view>
		</u-popup>
		<!-- </tn-modal> -->


	</view>
</template>

<script>
	import Verify from "@/components/verifition/Verify"
	import {
		getPosts
	} from '@/api/register'
	import {
		updatePwd
	} from '@/api/login'
	export default {
		onLoad() {
			//触发水印隐藏
			uni.$emit('ly-hide-watermark');
			// _this = this;
			// this.getPosts().then(res => {
			// 	_this.posts = res.data
			// })
		},
		onUnload() {
			//触发水印显示
			uni.$emit('ly-show-watermark');
		},
		onReady() {
			// this.$refs['form'].setRules(this.rules);
		},
		data() {
			return {
				posts: [],
				postShow: false,
				showModal: false,
				rules: {
					oldPassword: [{
						min: 4,
						max: 16,
						required: true,
						message: '请输入4到16位的密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'change',
					}],
					newPassword: [{
						min: 4,
						max: 16,
						message: '请再次输入密码',
						trigger: 'change'
					}, {
						// 自定义验证函数，见上说明
						validator: this.validateNewPassword,
						message: '两次输入的密码不相同',
						// 触发器可以同时用blur和change
						trigger: 'change',
					}],
					post: [{
						message: '请选择岗位',
						trigger: 'change'
					}]
				},
				pwdForm: {
					userid: '',
					oldPassword: '',
					newPassword: ''
				},
				isRememberPswArr: [false],
				isRememberPsw: false,
				captchaEnabled: true,
				loginForm: {
					username: "",
					password: "",
					captchaVerification: "",
					socialType: "",
					socialCode: "",
					socialState: "123"
				}
			};
		},
		components: {
			Verify
		},
		onLoad() {
			const loginForm = uni.getStorageSync('loginForm')
			if (loginForm) {
				this.loginForm.username = loginForm.username
				this.loginForm.password = loginForm.password
				this.isRememberPswArr = [true]
			}
		},
		methods: {
			isRememberPswChange(val) {
				if(val){
					this.isRememberPsw = val[0] ? val[0] : false
				}
			},
			validateNewPassword(rule, value, callback) {
				return this.pwdForm.oldPassword === value
			},
			postConfirm(e) {
				this.pwdForm.postIds[0] = e[0].value
				this.postInput = e[0].label
			},
			pwdSubmit() {
				let that = this
				that.$modal.loading("设置密码中，请耐心等待...")
				updatePwd(this.pwdForm).then(res => {
					that.$modal.closeLoading()
					uni.showToast({
						title: '密码设置成功，请重新登录',
						duration: 2000,
						mask: true,
						image: '/static/index/success.png',
						icon: 'none'
					});
					this.showModal = false
				})
			},
			toOtherPage(url) {
				this.$tab.reLaunch(url)
			},
			// 登录方法
			async handleLogin(params) {
				if (this.loginForm.username === "") {
					uni.showToast({
						title: '请输入您的账号',
						duration: 2000,
						mask: true,
						image: '/static/index/fail.png',
						icon: 'none'
					});
				} else {
					const that = this
					// 显示验证码
					if (this.captchaEnabled) {
						this.$refs.verify.show()
					} else { // 直接登录
						await this.pwdLogin({})
					}
				}
			},
			// 密码登录
			async pwdLogin(captchaParams) {
				const that = this
				that.$modal.loading("登录中，请耐心等待...")
				// 执行登录
				that.loginForm.captchaVerification = captchaParams.captchaVerification
				that.$store.dispatch('Login', that.loginForm).then((res) => {
					that.$modal.closeLoading()
					if (res.isPwdEmpty) {
						this.$refs.verify.close()
						that.pwdForm.userId = res.userId
						that.showModal = true
						return
					}
					that.loginSuccess()
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				const that = this
				// 设置用户信息
				that.$store.dispatch('GetInfo').then(res => {
					if (!that.$auth.hasRole(['wages_user'])) {
						uni.showToast({
							title: '您没有权限！',
							duration: 2000,
							mask: true,
							image: '/static/index/fail.png',
							icon: 'none'
						});
						return
					}
					if (that.isRememberPsw) {
						let loginForm = {
							username: that.loginForm.username,
							password: that.loginForm.password
						}
						uni.setStorageSync('loginForm', loginForm)
					}
					that.$tab.reLaunch('/pages/message/index')
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 311rpx;
		height: 101rpx;
		/* background: rgba(63, 205, 235, 1); */
		box-shadow: 5rpx 10rpx 10rpx 7rpx #e2e2e2;
		border-radius: 20upx;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header image {
		width: 301rpx;
		height: 91rpx;
		border-radius: 20upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}

	.list-call .img {
		width: 50rpx;
		height: 50rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 37rpx;
		margin-left: 16rpx;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: RGB(63, 86, 254);
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-hover {
		background: rgb(125, 128, 254);
	}

	.agreenment {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: RGB(63, 86, 254);
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.agreenment text {
		font-size: 24rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
</style>